<template>
	<view class="content">
		<!-- <uni-badge text="1"></uni-badge> -->
		<scroll-view class="header" scroll-x>
			
			<view 
			v-for="(item, index) in tabs" 
			:class="currentIndex === index ? 'active tab' : 'tab'" 
			:key="index"
			@click="handleActive(index)"
			>
			{{item.classname}}
		</view>

		</scroll-view>
		<view v-if="list.length" class="list-wrap">
			<view v-for="(item,index) in list" :key="item.id" class="item-box" @click="handleJump(item.id)">
				<view>
					<image class="image" :src="item.picurl" mode="aspectFit"></image>
				</view>
				<view class="item-detail">
					<view class="title">{{item.title}}</view>
					<text class="author">{{item.author}}</text>
				</view>
			</view>
		</view>
		<view v-else>
			<image src="https://img.zcool.cn/community/01d29258cce264a801219c77ec3f60.png" mode="aspectFit"></image>
		</view>
	</view>
</template>


<script>
import Child from '@/components/child.vue'
	export default {
		components: {
			Child
		},
		data() {
			return {
				tabs: [],
				currentIndex: 0,
				list: []
			}
		},
		onLoad(options) {
			this.getTabs();
		},
		onShow() {
			
		},
		onReachBottom() {
			
		},
		onPullDownRefresh() {
			
		},
		methods: {
			handleActive(index) {
				this.currentIndex = index;
				this.getList(this.tabs[this.currentIndex].id)
			},
			async getTabs() {
				let res = await uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/navlist.php'
				})
				this.tabs = res.data;
				this.getList(res.data[this.currentIndex].id);
			},
			async getList(id) {
				uni.showLoading({
					title: '正在努力加载中...'
				})
				let res = await uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data: {
						cid: id
					}
				})
				this.list = res.data;
				uni.hideLoading()
			},
			handleJump(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		// height: 150rpx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #DEDEDE;
		// flex-wrap: nowrap;
		white-space: nowrap;
		.tab {
			padding: 20rpx 50rpx;
			font-size: 30rpx;
			display: inline-block;
			&.active {
				color: #fff;
				background-color: red;
			}
		}
	}
	.image {
		width: 200rpx;
		height: 200rpx;
	}
	.item-box {
		display: flex;
		flex-direction: row;
	}
	.item-detail {
		margin-left: 30rpx;
		width: 520rpx;
		.title {
			font-size: 34rpx;
			width: 520rpx;
			color: #666;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.author {
			font-size: 24rpx;
			color: #ccc;
		}
	}
</style>
